<template>
  <view class="learning-detail">
    <block v-if="entry === LearningViewEntry.FlexArea">
      <PageModal v-model:show="visible" :footer-size="footerSize" :footer-style="footerStyle">
        <HighlightView :title="$t('Appliance.LearningProgram.Detail.Title')">
          <ProgramMeta
            ref="metaRef"
            :control="control"
            :scene="LearningViewScene.Detail"
            :proposal-type="ProposalType.Current"
            :presetting-disabled="presettingDisabled"
            @open-intro="openIntroModal"
            @open-presetting="openPresetting"
          />
          <view class="feedback-entry">
            <view
              v-if="control.store.learningPhase !== LearningPhase.Initial"
              class="feedback-control"
              @click="emit('open-feedback')"
            >
              <image class="feedback-icon" mode="aspectFit" src="/pages/appliance/static/learning/Feedback.png" />
              <text>{{ $t('Appliance.LearningProgram.Detail.FeedbackEntry.Text') }}</text>
            </view>
          </view>
        </HighlightView>

        <template #footer>
          <ActionButton vibrate :disabled="startDisabled" @click="startProgramNow">
            <text>{{ $t('Appliance.LearningProgram.Detail.GotoStart.Button.Text') }}</text>
          </ActionButton>
        </template>
      </PageModal>
    </block>

    <block v-else-if="entry === LearningViewEntry.ActionBar">
      <AdjustParameterModal v-model:show="visible" :control="control" :picker-keys="pickerKeys">
        <template #prefix>
          <ProgramMeta
            ref="metaRef"
            :control="control"
            :scene="LearningViewScene.Detail"
            :proposal-type="ProposalType.Current"
            :presetting-disabled="presettingDisabled"
            @open-intro="openIntroModal"
            @open-presetting="openPresetting"
          />
        </template>
      </AdjustParameterModal>
    </block>

    <!-- 预设置 -->
    <Presetting v-model:show="presettingVisible" :control="control" />

    <!-- 工作流程介绍 -->
    <IntroModal v-model:show="introVisible" />
  </view>
</template>

<script setup lang="ts">
import PageModal from '@/common/pageModal.vue'
import IntroModal from './introModal.vue'
import Presetting from './presetting.vue'
import { footerSize, footerStyle } from '@/layout/appliance/style'
import type { DishwasherController } from '@/controller/Dishwasher/definition'
import HighlightView from '@/pages/appliance/components/highlightView.vue'
import { LearningPhase, ProposalType } from '@/controller/Dishwasher/Learning/constants'
import ProgramMeta from '../components/ProgramMeta.vue'
import { LearningViewEntry, LearningViewScene } from '../constants'
import ActionButton from '@/common/actionButton/actionButton.vue'
import { useControlState } from '@/controller/BaseAppliance/useControl'
import AdjustParameterModal from '@/pages/appliance/view/adjustParameterModal.vue'

const props = defineProps<{
  show: boolean
  control: DishwasherController.Control
  entry: LearningViewEntry
  /**
   * ActionBar入口 需要以下参数
   *  - 调节参数Key 配置
   */
  pickerKeys?: string[] // 需要展示为Picker组件的 Key
}>()
const emit = defineEmits<{
  (e: 'update:show', show: boolean): void
  (e: 'close'): void
  (e: 'confirm'): void
  (e: 'open-feedback'): void
}>()

/**
 * 弹框状态
 */
const visible = computed({
  get: () => props.show,
  set(show) {
    emit('update:show', show)
    !show && emit('close')
  },
})
watch(
  () => props.show,
  (show) => {
    if (!show) return
    nextTick(() => nextTick(initData))
  },
  { immediate: true }
)
function initData() {
  loadMetaData()
}

/**
 * 程序详情
 */
const metaRef = ref<InstanceType<typeof ProgramMeta> | null>(null)
function loadMetaData() {
  metaRef.value?.loadMetaData()
}

/**
 * 立即启动
 */
const { startDisabled } = useControlState(props.control)
async function startProgramNow() {
  const currentProgram = props.control.store.currentProgram
  if (startDisabled.value || !currentProgram) return

  await props.control.store.startProgramNow(
    currentProgram,
    null,
    'Appliance.LearningProgram.Detail.GotoStart.Button.Text'
  )

  // 关闭详情页
  visible.value = false
}

/**
 * 预设置
 */
const presettingDisabled = computed(() => props.control.store.presettingDisabled)
const presettingVisible = ref(false)
function openPresetting() {
  presettingVisible.value = true
}

/**
 * 工作流程介绍
 */
const introVisible = ref(false)
function openIntroModal() {
  introVisible.value = true
}
// 详情页打开 且状态为初始状态 自动打开流程介绍
watchEffect(() => {
  if (visible.value && !props.control.store.learningUsed) {
    openIntroModal()
  }
})
</script>

<style scoped lang="less">
.feedback-entry {
  margin-top: 32rpx;
  text-align: center;
}
.feedback-control {
  display: inline-flex;
  align-items: center;
  padding: 4rpx 16rpx;
  border: 1rpx solid var(--primary-color);
  color: var(--primary-color);
  font-weight: 500;
  font-size: 28rpx;
  line-height: 40rpx;
  .feedback-icon {
    width: 32rpx;
    height: 32rpx;
    margin-right: 8rpx;
  }
}
</style>
